<!DOCTYPE html>
<!-- saved from url=(0059)https://acrens.github.io/2017/03/12/2017-03-11-lihe-height/ -->
<html lang="zh"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="baidu-site-verification" content="WbZh4sB1jK">
    
    <title>line-height 取值方式 | acrens - F2E</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="line-height 取值方式">
<meta property="og:type" content="article">
<meta property="og:title" content="line-height 取值方式">
<meta property="og:url" content="https://acrens.github.io/2017/03/12/2017-03-11-lihe-height/index.html">
<meta property="og:site_name" content="acrens - F2E">
<meta property="og:description" content="line-height 取值方式">
<meta property="og:updated_time" content="2017-03-22T14:28:13.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="line-height 取值方式">
<meta name="twitter:description" content="line-height 取值方式">
    

    

    
        <link rel="icon" href="./line-height 取值方式 _ acrens - F2E_files/avatar.jpg">
    

    <link rel="stylesheet" href="./line-height 取值方式 _ acrens - F2E_files/font-awesome.min.css">
    <link rel="stylesheet" href="./line-height 取值方式 _ acrens - F2E_files/styles.css">
    <link rel="stylesheet" href="./line-height 取值方式 _ acrens - F2E_files/styles(1).css">

    <link rel="stylesheet" href="./line-height 取值方式 _ acrens - F2E_files/style.css">

    <script src="https://hm.baidu.com/hm.js?118d71e20eeffe0a82841be371382e35"></script><script src="./line-height 取值方式 _ acrens - F2E_files/jquery.min.js"></script>
    
    
        <link rel="stylesheet" href="./line-height 取值方式 _ acrens - F2E_files/lightgallery.min.css">
    
    
    
    
    
        <script>
var _hmt = _hmt || [];
(function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?118d71e20eeffe0a82841be371382e35";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();
</script>

    


<script type="text/javascript" async="" src="https://static.duoshuo.com/embed.js" charset="UTF-8"></script><style type="text/css">
:root #header + #content > #left > #rlblock_left
{ display: none !important; }</style></head>

<body>
    <div id="container">
        <header id="header">
    <div id="header-main" class="header-inner">
        <div class="outer">
            <a href="https://acrens.github.io/" id="logo">
                <i class="logo"></i>
                <span class="site-title">acrens - F2E</span>
            </a>
            <nav id="main-nav">
                
                    <a class="main-nav-link" href="https://acrens.github.io/">Home</a>
                
                    <a class="main-nav-link" href="https://acrens.github.io/archives">Archives</a>
                
                    <a class="main-nav-link" href="https://github.com/acrens">GitHub</a>
                
                    <a class="main-nav-link" href="https://acrens.github.io/about">About</a>
                
            </nav>
            
                
                <nav id="sub-nav">
                    <div class="profile" id="profile-nav">
                        <a id="profile-anchor" href="javascript:;">
                            <img class="avatar" src="./line-height 取值方式 _ acrens - F2E_files/avatar.jpg">
                            <i class="fa fa-caret-down"></i>
                        </a>
                    </div>
                </nav>
            
            <div id="search-form-wrap">

    <form class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索">
        <button type="submit" class="search-form-submit"></button>
    </form>
    
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
<script src="./line-height 取值方式 _ acrens - F2E_files/insight.js"></script>

</div>
        </div>
    </div>
    <div id="main-nav-mobile" class="header-sub header-inner">
        <table class="menu outer">
            <tbody><tr>
                
                    <td><a class="main-nav-link" href="https://acrens.github.io/">Home</a></td>
                
                    <td><a class="main-nav-link" href="https://acrens.github.io/archives">Archives</a></td>
                
                    <td><a class="main-nav-link" href="https://github.com/acrens">GitHub</a></td>
                
                    <td><a class="main-nav-link" href="https://acrens.github.io/about">About</a></td>
                
                <td>
                    
    <div class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索">
    </div>

                </td>
            </tr>
        </tbody></table>
    </div>
</header>

        <div class="outer">
            
                

<aside id="profile">
    <div class="inner profile-inner">
        <div class="base-info profile-block">
            <img id="avatar" src="./line-height 取值方式 _ acrens - F2E_files/avatar.jpg">
            <h2 id="name">acrens</h2>
            <h3 id="title">前端工程师</h3>
            <span id="location"><i class="fa fa-map-marker"></i>HangZhou, China</span>
            <a id="follow" target="_blank" href="https://github.com/acrens">关注我</a>
        </div>
        <div class="article-info profile-block">
            <div class="article-info-block">
                10
                <span>文章</span>
            </div>
            <div class="article-info-block">
                16
                <span>标签</span>
            </div>
        </div>
        
        <div class="profile-block social-links">
            <table>
                <tbody><tr>
                    
                    
                    <td>
                        <a href="https://github.com/acrens" target="_blank" title="github" class="tooltip">
                            <i class="fa fa-github"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="http://stackoverflow.com/users/5676371/acrens" target="_blank" title="stack-overflow" class="tooltip">
                            <i class="fa fa-stack-overflow"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="https://www.facebook.com/profile.php?id=100010116844234" target="_blank" title="facebook" class="tooltip">
                            <i class="fa fa-facebook"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="https://www.linkedin.com/in/%E4%BB%81-%E7%A8%8B-038215b9?trk=nav_responsive_tab_profile_pic" target="_blank" title="linkedin" class="tooltip">
                            <i class="fa fa-linkedin"></i>
                        </a>
                    </td>
                    
                </tr>
            </tbody></table>
        </div>
        
    </div>
</aside>

            
            <section id="main"><article id="post-2017-03-11-lihe-height" class="article article-type-post" itemscope="" itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 class="article-title" itemprop="name">
            line-height 取值方式
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="https://acrens.github.io/2017/03/12/2017-03-11-lihe-height/">
            <time datetime="2017-03-11T17:30:00.000Z" itemprop="datePublished">2017-03-11</time>
        </a>
    </div>


                        
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="https://acrens.github.io/categories/line-height/">line-height</a>
    </div>

                        
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="https://acrens.github.io/tags/css/">css</a>, <a class="tag-link" href="https://acrens.github.io/tags/line-height/">line-height</a>
    </div>

                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody" lg-uid="lg0">
        
            
            <blockquote>
<p>相信很多前端er都使用过 line-height 来设置行高布局。下面看看官方定义：On block level elements, the line-height property specifies the minimum height of line boxes within the element.On non-replaced inline elements, line-height specifies the height that is used to calculate line box height.<br><a id="more"></a></p>
</blockquote>
<h3 id="line-height-取值方式"><a href="https://acrens.github.io/2017/03/12/2017-03-11-lihe-height/#line-height-取值方式" class="headerlink" title="line-height 取值方式"></a>line-height 取值方式</h3><p>有时候我们在开发的时候并没有太深入的去了解一个属性，比如：line-height 的不同取值达到的效果并不同，下面依次看看常用的几种取值方式。</p>
<hr>
<h4 id="px-单位取值"><a href="https://acrens.github.io/2017/03/12/2017-03-11-lihe-height/#px-单位取值" class="headerlink" title="px 单位取值"></a>px 单位取值</h4><p>line-height: 26px 目的就是直接定义目标元素的行高为 26px 的高度。</p>
<hr>
<h4 id="百分比取值"><a href="https://acrens.github.io/2017/03/12/2017-03-11-lihe-height/#百分比取值" class="headerlink" title="% 百分比取值"></a>% 百分比取值</h4><p>line-height: 150% 一般用该方式定义目标元素的行高会配合 font-size: 14px 属性使用，因为用百分比当前元素的行高为 1.5 * 14px = 21px。且如果其层叠子元素没有定义 line-height 属性，不管有没有定义 font-size 属性，其层叠子元素行高均为 21px（与自身的 font-size 没有任何关系）。</p>
<hr>
<h4 id="倍数取值"><a href="https://acrens.github.io/2017/03/12/2017-03-11-lihe-height/#倍数取值" class="headerlink" title="倍数取值"></a>倍数取值</h4><p>line-height:1.5 用该方式一般也是配合 font:14px 属性使用，但是对层叠子元素的影响效果并不同，如果层叠子元素没有定义 line-height 属性，但是定义了 font-size 属性，那这些层叠子元素的行高为继承过来的 line-height 倍数值乘以自身的 font-size 属性。</p>
<hr>
<h4 id="总结"><a href="https://acrens.github.io/2017/03/12/2017-03-11-lihe-height/#总结" class="headerlink" title="总结"></a>总结</h4><p>一般情况下，为了更加方便及清晰的使用 line-height，使用倍数取值是最佳的设置方式，如：body {font: 12px/1.5 tahoma,arial,”\5b8b\4f53”}。</p>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



    <div class="a2a_kit a2a_default_style">
    <a class="a2a_dd" href="https://www.addtoany.com/share">Share</a>
    <span class="a2a_divider"></span>
    <a class="a2a_button_facebook"></a>
    <a class="a2a_button_twitter"></a>
    <a class="a2a_button_google_plus"></a>
    <a class="a2a_button_pinterest"></a>
    <a class="a2a_button_tumblr"></a>
</div>
<script type="text/javascript" src="./line-height 取值方式 _ acrens - F2E_files/page.js"></script>
<style>
    .a2a_menu {
        border-radius: 4px;
    }
    .a2a_menu a {
        margin: 2px 0;
        font-size: 14px;
        line-height: 16px;
        border-radius: 4px;
        color: inherit !important;
        font-family: 'Microsoft Yahei';
    }
    #a2apage_dropdown {
        margin: 10px 0;
    }
    .a2a_mini_services {
        padding: 10px;
    }
    a.a2a_i,
    i.a2a_i {
        width: 122px;
        line-height: 16px;
    }
    a.a2a_i .a2a_svg,
    a.a2a_more .a2a_svg {
        width: 16px;
        height: 16px;
        line-height: 16px;
        vertical-align: top;
        background-size: 16px;
    }
    a.a2a_i {
        border: none !important;
    }
    a.a2a_menu_show_more_less {
        margin: 0;
        padding: 10px 0;
        line-height: 16px;
    }
    .a2a_mini_services:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    .a2a_mini_services{*+height:1%;}
</style>

</div>

            
    
        <a href="https://acrens.github.io/2017/03/12/2017-03-11-lihe-height/#comments" class="article-comment-link ds-thread-count" data-thread-key="https://acrens.github.io/2017/03/12/2017-03-11-lihe-height/">评论</a>
    

        </footer>
    </div>
    
        
<nav id="article-nav">
    
        <a href="https://acrens.github.io/2017/03/23/2017-03-22-reflow&amp;repaint/" id="article-nav-newer" class="article-nav-link-wrap">
            <strong class="article-nav-caption">上一篇</strong>
            <div class="article-nav-title">
                
                    浏览器渲染那些事之 Reflow、Repaint
                
            </div>
        </a>
    
    
        <a href="https://acrens.github.io/2017/01/22/2017-01-22-TDZ/" id="article-nav-older" class="article-nav-link-wrap">
            <strong class="article-nav-caption">下一篇</strong>
            <div class="article-nav-title">javascript 中 TDZ 的理解</div>
        </a>
    
</nav>


    
</article>


    
    <section id="comments">
    
        
    <div class="ds-thread" data-thread-key="2017/03/12/2017-03-11-lihe-height/" data-title="line-height 取值方式" data-url="https://acrens.github.io/2017/03/12/2017-03-11-lihe-height/"></div>
    <style>
        #ds-thread #ds-reset .ds-textarea-wrapper {
            background: none;
        }
        #ds-reset .ds-avatar img {
            box-shadow: none;
        }
        #ds-reset .ds-gradient-bg {
            background: #f7f7f7;
        }
        #ds-thread #ds-reset li.ds-tab a {
            border-radius: 3px;
        }
        #ds-thread #ds-reset .ds-post-button {
            color: white;
            border: none;
            box-shadow: none;
            background: #d32;
            text-shadow: none;
            font-weight: normal;
            font-family: 'Microsoft Yahei';
        }
        #ds-thread #ds-reset .ds-post-button:hover {
            color: white;
            background: #DE594C;
        }
        #ds-thread #ds-reset .ds-post-button:active {
            background: #d32;
        }
        #ds-smilies-tooltip ul.ds-smilies-tabs li a.ds-current {
            color: white;
            background: #d32;
            box-shadow: none;
            text-shadow: none;
            font-weight: normal;
        }
    </style>

    
    </section>

</section>
            
                <aside id="sidebar">
   
        
    <div class="widget-wrap">
        <h3 class="widget-title">最新文章</h3>
        <div class="widget">
            <ul id="recent-post" class="">
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="https://acrens.github.io/2017/03/23/2017-03-22-reflow&amp;repaint/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="https://acrens.github.io/categories/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93/">浏览器渲染</a></p>
                            <p class="item-title"><a href="https://acrens.github.io/2017/03/23/2017-03-22-reflow&amp;repaint/" class="title">浏览器渲染那些事之 Reflow、Repaint</a></p>
                            <p class="item-date"><time datetime="2017-03-22T22:09:00.000Z" itemprop="datePublished">2017-03-22</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="https://acrens.github.io/2017/03/12/2017-03-11-lihe-height/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="https://acrens.github.io/categories/line-height/">line-height</a></p>
                            <p class="item-title"><a href="https://acrens.github.io/2017/03/12/2017-03-11-lihe-height/" class="title">line-height 取值方式</a></p>
                            <p class="item-date"><time datetime="2017-03-11T17:30:00.000Z" itemprop="datePublished">2017-03-11</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="https://acrens.github.io/2017/01/22/2017-01-22-TDZ/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="https://acrens.github.io/categories/TDZ%EF%BC%88Temporal-Dead-Zone%EF%BC%89/">TDZ（Temporal Dead Zone）</a></p>
                            <p class="item-title"><a href="https://acrens.github.io/2017/01/22/2017-01-22-TDZ/" class="title">javascript 中 TDZ 的理解</a></p>
                            <p class="item-date"><time datetime="2017-01-22T14:15:00.000Z" itemprop="datePublished">2017-01-22</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="https://acrens.github.io/2016/11/30/2016-11-29-fe_team/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="https://acrens.github.io/categories/FE-team/">FE team</a></p>
                            <p class="item-title"><a href="https://acrens.github.io/2016/11/30/2016-11-29-fe_team/" class="title">关于组建一支精良团队的构想</a></p>
                            <p class="item-date"><time datetime="2016-11-29T21:38:00.000Z" itemprop="datePublished">2016-11-29</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="https://acrens.github.io/2016/09/21/2016-09-20-fe_unit_test/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="https://acrens.github.io/categories/%E8%87%AA%E5%8A%A8%E5%8C%96%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/">自动化单元测试</a></p>
                            <p class="item-title"><a href="https://acrens.github.io/2016/09/21/2016-09-20-fe_unit_test/" class="title">来，加入前端自动化单元测试</a></p>
                            <p class="item-date"><time datetime="2016-09-20T23:30:00.000Z" itemprop="datePublished">2016-09-20</time></p>
                        </div>
                    </li>
                
            </ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">分类</h3>
        <div class="widget">
            <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="https://acrens.github.io/categories/FE-team/">FE team</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="https://acrens.github.io/categories/JFinal/">JFinal</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="https://acrens.github.io/categories/Promise/">Promise</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="https://acrens.github.io/categories/TDZ%EF%BC%88Temporal-Dead-Zone%EF%BC%89/">TDZ（Temporal Dead Zone）</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="https://acrens.github.io/categories/XSS/">XSS</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="https://acrens.github.io/categories/line-height/">line-height</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="https://acrens.github.io/categories/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/">前端性能优化</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="https://acrens.github.io/categories/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93/">浏览器渲染</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="https://acrens.github.io/categories/%E8%87%AA%E5%8A%A8%E5%8C%96%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/">自动化单元测试</a><span class="category-list-count">1</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">归档</h3>
        <div class="widget">
            <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="https://acrens.github.io/archives/2017/03/">三月 2017</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="https://acrens.github.io/archives/2017/01/">一月 2017</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="https://acrens.github.io/archives/2016/11/">十一月 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="https://acrens.github.io/archives/2016/09/">九月 2016</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="https://acrens.github.io/archives/2016/07/">七月 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="https://acrens.github.io/archives/2016/06/">六月 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="https://acrens.github.io/archives/2014/07/">七月 2014</a><span class="archive-list-count">2</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签</h3>
        <div class="widget">
            <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="https://acrens.github.io/tags/JFinal/">JFinal</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="https://acrens.github.io/tags/Promise/">Promise</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="https://acrens.github.io/tags/Reflow/">Reflow</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="https://acrens.github.io/tags/Repaint/">Repaint</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="https://acrens.github.io/tags/TDZ/">TDZ</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="https://acrens.github.io/tags/Temporal-Dead-Zone/">Temporal Dead Zone</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="https://acrens.github.io/tags/XSS/">XSS</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="https://acrens.github.io/tags/auto-unit-test/">auto-unit-test</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="https://acrens.github.io/tags/css/">css</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="https://acrens.github.io/tags/javascript/">javascript</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="https://acrens.github.io/tags/line-height/">line-height</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="https://acrens.github.io/tags/%E5%89%8D%E7%AB%AF%E5%9B%A2%E9%98%9F/">前端团队</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="https://acrens.github.io/tags/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/">单元测试</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="https://acrens.github.io/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/">性能优化</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="https://acrens.github.io/tags/%E6%9E%84%E6%83%B3/">构想</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="https://acrens.github.io/tags/%E7%B2%BE%E8%89%AF/">精良</a><span class="tag-list-count">1</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签云</h3>
        <div class="widget tagcloud">
            <a href="https://acrens.github.io/tags/JFinal/" style="font-size: 20px;">JFinal</a> <a href="https://acrens.github.io/tags/Promise/" style="font-size: 10px;">Promise</a> <a href="https://acrens.github.io/tags/Reflow/" style="font-size: 10px;">Reflow</a> <a href="https://acrens.github.io/tags/Repaint/" style="font-size: 10px;">Repaint</a> <a href="https://acrens.github.io/tags/TDZ/" style="font-size: 10px;">TDZ</a> <a href="https://acrens.github.io/tags/Temporal-Dead-Zone/" style="font-size: 10px;">Temporal Dead Zone</a> <a href="https://acrens.github.io/tags/XSS/" style="font-size: 10px;">XSS</a> <a href="https://acrens.github.io/tags/auto-unit-test/" style="font-size: 10px;">auto-unit-test</a> <a href="https://acrens.github.io/tags/css/" style="font-size: 10px;">css</a> <a href="https://acrens.github.io/tags/javascript/" style="font-size: 10px;">javascript</a> <a href="https://acrens.github.io/tags/line-height/" style="font-size: 10px;">line-height</a> <a href="https://acrens.github.io/tags/%E5%89%8D%E7%AB%AF%E5%9B%A2%E9%98%9F/" style="font-size: 10px;">前端团队</a> <a href="https://acrens.github.io/tags/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/" style="font-size: 10px;">单元测试</a> <a href="https://acrens.github.io/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" style="font-size: 10px;">性能优化</a> <a href="https://acrens.github.io/tags/%E6%9E%84%E6%83%B3/" style="font-size: 10px;">构想</a> <a href="https://acrens.github.io/tags/%E7%B2%BE%E8%89%AF/" style="font-size: 10px;">精良</a>
        </div>
    </div>

    
        
    <div class="widget-wrap widget-list">
        <h3 class="widget-title">链接</h3>
        <div class="widget">
            <ul>
                
                    <li>
                        <a href="http://blog.fexnotes.com/">老郭（kugua）</a>
                    </li>
                
                    <li>
                        <a href="http://gold.xitu.io/">掘金</a>
                    </li>
                
            </ul>
        </div>
    </div>


    
    <div id="toTop" class="fa fa-angle-up"></div>
</aside>
            
        </div>
        <footer id="footer">
    <div class="outer">
        <div id="footer-info" class="inner">
            © 2017 acrens<br>
            Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>. Theme by <a href="http://github.com/ppoffice">PPOffice</a>
        </div>
    </div>
</footer>
        
    
    <script type="text/javascript">
    var duoshuoQuery = {short_name:'acrens'};
    (function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0]
    || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>



    
        <script src="./line-height 取值方式 _ acrens - F2E_files/lightgallery.min.js"></script>
        <script src="./line-height 取值方式 _ acrens - F2E_files/lg-thumbnail.min.js"></script>
        <script src="./line-height 取值方式 _ acrens - F2E_files/lg-pager.min.js"></script>
        <script src="./line-height 取值方式 _ acrens - F2E_files/lg-autoplay.min.js"></script>
        <script src="./line-height 取值方式 _ acrens - F2E_files/lg-fullscreen.min.js"></script>
        <script src="./line-height 取值方式 _ acrens - F2E_files/lg-zoom.min.js"></script>
        <script src="./line-height 取值方式 _ acrens - F2E_files/lg-hash.min.js"></script>
        <script src="./line-height 取值方式 _ acrens - F2E_files/lg-share.min.js"></script>
        <script src="./line-height 取值方式 _ acrens - F2E_files/lg-video.min.js"></script>
    
    



<!-- Custom Scripts -->
<script src="./line-height 取值方式 _ acrens - F2E_files/main.js"></script>

    </div><div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="想要查找什么...">
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"><section class="ins-section"><header class="ins-section-header">文章</header><div class="ins-selectable ins-search-item" data-url="/2017/03/23/2017-03-22-reflow&amp;repaint/"><header><i class="fa fa-file"></i>浏览器渲染那些事之 Reflow、Repaint</header><p class="ins-search-preview">在进行网页开发的时候，一般会忽略到页面渲染给浏览器带来的性能问题；在实际情况中，浏览器进行页面渲染会进行大量的计算，来确定每个可见元素在屏幕上的精确位置、大小，还需要将每个确定好的像素绘制到屏幕上，这些操作都需要消耗大量的资源；如果反复的进行这些操作，对用户设备性能损耗不容乐观，因此希望通过这篇文章</p></div><div class="ins-selectable ins-search-item" data-url="/2017/03/12/2017-03-11-lihe-height/"><header><i class="fa fa-file"></i>line-height 取值方式</header><p class="ins-search-preview">相信很多前端er都使用过 line-height 来设置行高布局。下面看看官方定义：On block level elements, the line-height property specifies the minimum height of line boxes within the elem</p></div><div class="ins-selectable ins-search-item" data-url="/2017/01/22/2017-01-22-TDZ/"><header><i class="fa fa-file"></i>javascript 中 TDZ 的理解</header><p class="ins-search-preview">春节快到了，假期也快到了，空闲之余刷个微博，看见 @ruanyf 提出了一个问题与 TDZ 有关，但是貌似阮大当时还没有意识到这个问题，多亏一些其他业内同仁提出了与 TDZ 相关；当然，以阮大的能力这都不是事。由于当时我本身也还不知道 TDZ 这一回事没有看懂，所以就花了一些时间去搞清楚什么是 TD</p></div><div class="ins-selectable ins-search-item" data-url="/2016/11/30/2016-11-29-fe_team/"><header><i class="fa fa-file"></i>关于组建一支精良团队的构想</header><p class="ins-search-preview">今年双十一也过去一段时间，在双十一的大潮中，产生了很多匪夷所思的大数据。天猫的 1207 亿元成交额。在这些大数据的背后，有多少团队在为之付出，又有多少人为之倾尽全力。双十一过后的几周，我不断在订阅号里看见双十一带来的连锁反应，各种技术文章，看了让人心动。但是我又因此思考，如何在这场战争后继续保持一</p></div><div class="ins-selectable ins-search-item" data-url="/2016/09/21/2016-09-20-fe_unit_test/"><header><i class="fa fa-file"></i>来，加入前端自动化单元测试</header><p class="ins-search-preview">最近闲来无事，开始摸索前端单元测试。一是不备之需，二是确实在实际项目中能够用到单元测试。这样可以提高开发效率，提升代码质量，完全可以单独对 JS 进行测试，无需页面，不依赖其他第三方。 为什么需要单元测试在这里首先需要知道单元测试的目的及结果： 使代码健壮，质量高，兼容各种临界点； 减少 QA 测试</p></div></section><section class="ins-section"><header class="ins-section-header">页面</header><div class="ins-selectable ins-search-item" data-url="/categories/index.html"><header><i class="fa fa-file"></i>Categories</header></div><div class="ins-selectable ins-search-item" data-url="/about/index.html"><header><i class="fa fa-file"></i>关于我</header><p class="ins-search-preview">姓名：程仁 出生年月：1992.9 家乡：江西上饶 现在所在公司：丁香园 邮箱 acrens@163com github (GitHub) 扫一扫，加好友</p></div><div class="ins-selectable ins-search-item" data-url="/tags/index.html"><header><i class="fa fa-file"></i>Tags</header></div></section><section class="ins-section"><header class="ins-section-header">分类</header><div class="ins-selectable ins-search-item" data-url="https://acrens.github.io/categories/浏览器渲染/"><header><i class="fa fa-folder"></i>浏览器渲染<span class="ins-slug">浏览器渲染</span></header></div><div class="ins-selectable ins-search-item" data-url="https://acrens.github.io/categories/line-height/"><header><i class="fa fa-folder"></i>line-height<span class="ins-slug">line-height</span></header></div><div class="ins-selectable ins-search-item" data-url="https://acrens.github.io/categories/TDZ（Temporal-Dead-Zone）/"><header><i class="fa fa-folder"></i>TDZ（Temporal Dead Zone）<span class="ins-slug">TDZ（Temporal-Dead-Zone）</span></header></div><div class="ins-selectable ins-search-item" data-url="https://acrens.github.io/categories/FE-team/"><header><i class="fa fa-folder"></i>FE team<span class="ins-slug">FE-team</span></header></div><div class="ins-selectable ins-search-item" data-url="https://acrens.github.io/categories/自动化单元测试/"><header><i class="fa fa-folder"></i>自动化单元测试<span class="ins-slug">自动化单元测试</span></header></div></section><section class="ins-section"><header class="ins-section-header">标签</header><div class="ins-selectable ins-search-item" data-url="https://acrens.github.io/tags/构想/"><header><i class="fa fa-tag"></i>构想<span class="ins-slug">构想</span></header></div><div class="ins-selectable ins-search-item" data-url="https://acrens.github.io/tags/Reflow/"><header><i class="fa fa-tag"></i>Reflow<span class="ins-slug">Reflow</span></header></div><div class="ins-selectable ins-search-item" data-url="https://acrens.github.io/tags/css/"><header><i class="fa fa-tag"></i>css<span class="ins-slug">css</span></header></div><div class="ins-selectable ins-search-item" data-url="https://acrens.github.io/tags/line-height/"><header><i class="fa fa-tag"></i>line-height<span class="ins-slug">line-height</span></header></div><div class="ins-selectable ins-search-item" data-url="https://acrens.github.io/tags/javascript/"><header><i class="fa fa-tag"></i>javascript<span class="ins-slug">javascript</span></header></div></section></div>
        </div>
    </div>
</div>

</body></html>